<template>
  <div>
    <Card title="环境查询" :bordered="false" :dis-hover="true">
      <div slot="extra">
        <Button
          size="small"
          type="primary"
          icon="ios-search"
          class="card-extra-item"
          @click="search"
          >搜索</Button
        >
      </div>
      <Form
        inline
        label-position="right"
        :label-width="100"
        :model="searchParams"
      >
        <Row>
          <Col span="6">
            <FormItem label="环境名称">
              <Input
                clearable
                placeholder="请输入环境名称"
                v-model="searchParams.name"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Card>
    <Card title="环境列表" :bordered="false" :dis-hover="true">
      <div slot="extra">
        <Button
          class="card-extra-item"
          size="small"
          type="primary"
          @click="createEnvironment = true"
          >创建环境
        </Button>
      </div>
      <Table
        :columns="environmentColumns"
        :data="environmentData"
        border
        size="small"
        :tooltip-max-width="500"
      >
        <template slot-scope="{ row }" slot="modifier">
          {{ row.modifier.real_name }}
        </template>
        <template slot-scope="{ row }" slot="action">
          <Button
            size="small"
            type="text"
            style="color: #2d8cf0"
            @click="showEditEnvModal(row)"
            >编辑
          </Button>
          <Poptip
            title="确定要删除吗?"
            :confirm="true"
            :transfer="true"
            @on-ok="handleDeleteEnvironment(row.id)"
          >
            <Button size="small" type="text" style="color: #ed4014"
              >删除</Button
            >
          </Poptip>
        </template>
      </Table>
      <Page
        transfer
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        :page-size-opts="page.pageSizeOpts"
        size="small"
        show-elevator
        show-sizer
        show-total
        prev-text="上一页"
        next-text="下一页"
        style="margin-top: 15px"
        @on-change="change"
        @on-page-size-change="pageSizeChange"
      />
    </Card>
    <EnvironmentCreate
      :createEnvironment.sync="createEnvironment"
      @initEnvTable="search"
    ></EnvironmentCreate>
    <EnvironmentEdit
      :editEnvironment.sync="editEnvironment"
      @initEnvTable="search"
      :environment="environment"
    ></EnvironmentEdit>
  </div>
</template>

<script>
import EnvironmentCreate from "@/view/components/HttpAutoTestService/environment/environment-create";
import EnvironmentEdit from "@/view/components/HttpAutoTestService/environment/environment-edit";
import { getEnvs, deleteEnv } from "@/api/HttpAutoTestService/environment";

export default {
  name: "environment",
  components: {
    EnvironmentCreate,
    EnvironmentEdit,
  },
  data() {
    return {
      createEnvironment: false,
      editEnvironment: false,
      searchParams: {
        name: "",
      },
      environment: {},
      environmentColumns: [
        {
          type: "index",
          width: 60,
          align: "center",
        },
        {
          title: "环境名称",
          key: "name",
          minWidth: 200,
          maxWidth: 350,
        },
        {
          title: "环境地址",
          key: "base_url",
          minWidth: 200,
          maxWidth: 350,
        },
        {
          title: "环境全局参数",
          key: "global_variables",
          minWidth: 350,
          ellipsis: true,
          align: "center",
        },
        {
          title: "备注",
          key: "remark",
          width: 350,
          tooltip: true,
        },
        {
          title: "最近维护人",
          slot: "modifier",
          align: "center",
          width: 120,
        },
        {
          title: "操作",
          slot: "action",
          width: 125,
          align: "center",
          fixed: "right",
        },
      ],
      environmentData: [],
      page: {
        current: 1,
        total: 0,
        pageSize: 50,
        pageSizeOpts: [10, 30, 50, 100, 200],
      },
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    search(page) {
      let data = {
        name: this.searchParams.name,
        page: 1,
        page_size: this.page.pageSize,
      };
      if (typeof page == "number") {
        data.page = page;
      }
      this.page.current = data.page;

      getEnvs(data)
        .then((res) => {
          const data = res.data;
          this.environmentData = data.results;
          this.page.total = data.count;
          if (data.next === null) {
            this.page.current = Math.ceil(this.page.total / this.page.pageSize);
          }
          if (data.previous === null) {
            this.page.current = 1;
          }
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    handleDeleteEnvironment(id) {
      deleteEnv(id)
        .then((res) => {
          const status = res.status;
          const data = res.data;
          if (status === 200) {
            this.$Message.error(data);
          } else if (status === 204) {
            this.$Message.info("删除成功");
          }
          this.search();
        })
        .catch((err) => {
          this.$Modal.error({
            title: "系统异常，请联系管理员……",
            content: JSON.stringify(err),
            closable: true,
          });
        });
    },

    showEditEnvModal(row) {
      let { id, name, base_url, remark, global_variables } = row;
      this.environment = {
        id,
        name,
        base_url,
        remark,
        global_variables,
      };
      this.editEnvironment = true;
    },

    change(val) {
      this.page.current = val;
      this.search(val);
    },

    pageSizeChange(val) {
      this.page.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>
.ivu-form-item {
  width: 100%;
}
</style>
